<template>
	<view class="type-bar">
		<view class="item" v-for="item in datalist" :key="item.id">
			<view class="imgbox">
			<image :src="$config.IMG_URL + item.img" mode="aspectFill" v-if="item.img"></image>
			<text :class="item.icon" v-if="item.icon" style="font-size: 12vw; color: red;"></text>
			</view>
			{{item.name}}
		</view>
	</view>
</template>

<script>
	import {
		getType
	} from '@/config/api.js'
	export default {
		name:"type-bar",
		data() {
			return {
				datalist:[{
					icon:"yticon icon-shouye",
					name:"查看订单"
				}]
			};
		},
		mounted() {
			this.getData()
		},
		methods:{
			async getData(){
				const { data } = await getType()
				this.datalist = [...this.datalist, ...data]
				// data.map(e=>{
				// 	this.datalist=this.datalist.concat([...e.subArr])
				// });
				console.log(this,"datas")
			}
		}
	}
</script>

<style lang="scss">
.type-bar{
	background-color: #FFFFFF;
	border-radius: 20rpx;
	// height: 300rpx;
	margin: 30rpx 20rpx;
	display: flex;
	flex-wrap: wrap;
	padding: 10rpx;
	.item{
		// flex: 1;
		box-sizing: border-box;
		// max-width: 25vw;
		width:25%;
		// height: 25vw;
		// border: 1rpx solid;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.imgbox{
			// flex: 1;
			width: 12vw;
			height: 12vw;
			border-radius: 5rpx;
			overflow: hidden;
			// border: 1rpx solid red;
			image{
				width: 100%;
				height: 100%;
			}
		}
		text{
			margin: 10rpx 0;
		}
	}
}
</style>
